import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
import { Button, Row, Form, Input, Cascader, Icon, Upload, Modal } from 'antd'

class ImageUpload extends React.Component {
  state = {
    previewVisible: false,
    previewImage: '',
    fileList: [{
      uid: -1,
      name: 'xxx.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    }],
  }

  handleCancel = () => this.setState({ previewVisible: false })

  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  }

  handleChange = ({ fileList }) => this.setState({ fileList })

  onChange = (value) => {
    console.log("======value:" + value);
  }
  render() {
    const { previewVisible, previewImage, fileList } = this.state;
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">Upload</div>
      </div>
    );

    const options = [{
      value: 'icon',
      label: '图标',
      children: [{
        value: 'icon1',
        label: '图标分类1'
      },{
        value: 'icon2',
        label: '图标分类2'
      },{
        value: 'icon3',
        label: '图标分类3'
      }],
    }, {
      value: 'wallpaper',
      label: '壁纸',
      children: [{
        value: 'wallpaper1',
        label: '壁纸分类1',
      },{
        value: 'wallpaper2',
        label: '壁纸分类2',
      },{
        value: 'wallpaper3',
        label: '壁纸分类3',
      }],
    },{
      value: 'combine',
      label: 'DIY',
      children: [{
        value: 'combine1',
        label: '自由组合1',
      },{
        value: 'combine2',
        label: '自由组合2',
      },{
        value: 'combine3',
        label: '自由组合3',
      }],
    }];

    return (
      <div className="clearfix">
        <div>
          <Cascader defaultValue={['wallpaper', 'wallpaper2']} options={options} onChange={this.onChange}  style={{width:"250px"}}/>
        </div>
        <div>
          <Upload
            action="//jsonplaceholder.typicode.com/posts/"
            listType="picture-card"
            fileList={fileList}
            onPreview={this.handlePreview}
            onChange={this.handleChange}
            multiple={true}
          >
            {fileList.length >= 3 ? null : uploadButton}
          </Upload>
          <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
            <img alt="example" style={{ width: '100%' }} src={previewImage} />
          </Modal>
        </div>
      </div>
    );
  }
}

export default connect()(ImageUpload)
